<template>
	<view>
		<!-- TAB头：当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
		<me-tabs v-model="tabIndex" :tabs="tabs" :tab-width="150" :height="tab_height"></me-tabs>
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :api_url="api_url" :height="height" v-if="canInit"></mescroll-item>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
/**
 * 本实例适合全屏的tab数据列表页面
 * 一、使用方法指引：
 *   1、使用此插件所需要本页面代码外，还需以下6处文件或文件夹：uni_modules/mescroll-uni、static/mescroll-uni、components/me-tabs、${swiper}.vue、${swiper}/item.vue、${swiper}/me-list.vue
 *   2、指定tab头参数（this.tabs 或 api获取tab则设置好路径即可this.tabs_api_url）
 *   3、修改import MescrollItem from '待修改的vue文件路径'
 *   4、关于tab-width宽度，如果是固定非滑动的则总750rpx给相应tab平分即可
 *   5、接下来移步至兄弟页面：${swiper}/item.vue
 * 二、参考 & 备注
 *   1、官网文档：https://www.mescroll.com/uni.html
 *   2、mescroll插件市场来源：https://ext.dcloud.net.cn/plugin?id=343
 *   3、注：一个.vue文件只能存在一个mescroll组件, 如果要多mescroll组件, 需分别封装到子组件中，如: tab切换, 页面存在多个mescroll组件, 那么请严格参考mescroll-swiper.vue 示例的写法，即需要swiper.vue 》 swiper/item.vue 》 swiper/me-list.vue
 */
//加载列表数据循环元素体文件：mescroll-swiper
import MescrollItem from "./mescroll-swiper/item.vue";

export default {
    components: {
        /***** mescroll S *****/
        //注册组件
        MescrollItem
        /***** mescroll E *****/
    },
    data() {
        return {
            /***** mescroll S *****/
			//定义tab的高度
			tab_height: 90,
            //指定tab头的api路径
            tabs_api_url: 'demo/swiper_tab',//'demo/swiper_tab',
            //设置列表api路径
            api_url : 'demo/swiper',
            //tab头选项（如设置了this.tabs_api_url则this.tabs为空数组即可）
			tabs: [], //格式示例：[{tabId:'all',name:'全部'}, {tabId:'t1',name:'奶粉'}, {tabId:'t2',name:'面膜'}, {tabId:'t3',name:'图书'}, {tabId:'t4',name:'果汁'}, {tabId:'t5',name:'奶瓶'}, {tabId:'t6',name:'美素'}, {tabId:'t7',name:'花王'}, {tabId:'t8',name:'韩蜜'}],
			//默认tab的current下标（0，1，2，3...）
            tabIndex: 0,
		    //需要固定swiper的高度
			height: "",
            //是否可以可初始化（可以用来延时初始化，用于达到某条件时机时才触发初始化mescroll）
            canInit: true,
            /***** mescroll E *****/
        }
    },
    onLoad(option) {
        var that=this;
        /***** mescroll S *****/
        //需要固定swiper的高度 (需减去悬浮tabs的高度)
        this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(this.tab_height) + 'px';
        //api获取tab数据
        if(this.tabs_api_url!='') {
            this.ajax({ url: this.tabs_api_url }).then(res => {
                this.tabs = res.data;
            });
        }
        //如果带有$_GET[tabindex]参数，则指向相应的tab的current
        if(typeof(option.tabindex)!='undefined' && option.tabindex)
            this.tabIndex = option.tabindex;
        //供其他页面使用的刷新事件监听：刷新当前TAB【在其他页面调用刷新的方法：uni.$emit('refreshTabs');】
        uni.$on('refreshTabs',function(){
            that.$refs.mescrollItem[that.tabIndex].refreshTab();//特别注意：这里需要指定tabindex的值；以及这里不能用this
        });
        /***** mescroll E *****/
    },
    methods: {
        /***** mescroll S *****/
        /**
         * 当用户操作滑动内容时，更新tab头的current值
         */
        swiperChange(e) {
            this.tabIndex = e.detail.current
        }
        /***** mescroll E *****/
    }
}
</script>

<style>
</style>
